<template>
  <v-card>
    <v-card-title>
      <!-- Nutrition Nutrition Nutrition Nutrition Nutrition -->
      <v-spacer></v-spacer>
      <v-row class="justify-end">
        <v-col cols="12" xs="12" sm="12" md="4" lg="4" xl="4">
          <v-text-field v-model="pageSearch" append-icon="mdi-magnify" label="搜索" single-line hide-details>
          </v-text-field>
        </v-col>
      </v-row>
    </v-card-title>
    <v-data-table
      :loading="laoding"
      dense
      :headers="tableHeaders"
      :items="tableData"
      :search="pageSearch"
      :options.sync="options"
      class="tableCustom"
      :show-select="tableOptions.selectShow"
      :single-select="tableOptions.selectSingle"
      :footer-props="footerProps"
      :custom-filter="filterOnlyCapsText"
    >
      <template v-slot:[`item.status`]="{ header, value }">
        <div>
          {{ mapFind(header.map, 'value', value).text }}
        </div>
      </template>
      <!-- <template v-for="item in headers">
        <template v-if="item.mapping"> </template>
      </template> -->
      <!-- :server-items-length="20" -->
      <!-- hide-default-footer -->
      <!-- <template v-slot:header.index="{ header }" }>
        {{ header }}
      </template> -->
      <!-- :server-items-length="20" -->
      <!-- :items-per-page="-1" -->
      <!-- <template v-slot:[`footer.page-text`]>
        <pagination-component class="tablePagination"></pagination-component>
      </template> -->
    </v-data-table>
    <v-card-actions class="pa-2" style="border-top:thin solid rgba(0, 0, 0, 0.12);">
      <pagination-component class="tablePagination"></pagination-component>
    </v-card-actions>
  </v-card>
</template>

<script>
import { assignObject, deepCopy, isEmptyValue } from '@/utils/tools'
import PaginationComponent from '../Pagination/PaginationComponent.vue'
import { findItem } from '@/utils/arraySort'
import { getMapList } from '@/utils/dataConvert'
export default {
  // 表格组件
  name: 'TableComponent',

  components: {
    PaginationComponent
  },

  model: {
    prop: 'tableData',
    event: 'setTableData'
  },

  props: {
    // 显示表格
    tableShow: { type: Boolean, default: false },
    // 表格配置
    tableConfig: { type: Object, default: () => ({}) },
    // 表格数据
    tableData: { type: Array, default: () => [] }
  },

  data() {
    return {
      // 表格显示数据重定向
      show: this.tableShow,
      // 表格数据
      data: this.tableData,
      // 表格当前页过滤器
      pageSearch: '',
      // 表格配置
      config: this.tableConfig,
      // 配置所有配置项
      items: this.tableConfig.itemConfig,
      // 更改key值
      keyMap: {
        label: 'text',
        prop: 'value'
      },
      // 加载器
      laoding: true,
      // 表格配置
      options: {},
      // 表脚属性
      footerProps: {
        itemsPerPageOptions: [10, 20, 40, 100]
        // itemsPerPage: this.tableConfig.pagination.size
      },
      tableOptions: {
        indexShow: true,
        selectShow: true,
        selectSingle: true
      },
      tableIndex: {
        text: '序号',
        tableShow: true
      },
      mapFind: findItem
    }
  },

  computed: {
    tableHeaders() {
      return this.changeItemsKey()
      // return this.items.map(item=>item.tableShow&&item.)
    }
  },

  watch: {
    tableData: {
      handler(nv) {
        this.laoding = true
        setTimeout(() => {
          this.laoding = false
          this.setData()
        }, 300)
      }
    }
  },

  created() {
    this.setTableShow()
    this.setTableOptions()
    getMapList()
  },

  mounted() {
    this.setMappingList()

    // console.log('table component is mounted')
  },

  methods: {
    // 控制显隐
    setTableShow() {
      this.items.forEach(item => {
        !('tableShow' in item) && this.$set(item, 'tableShow', true)
      })
      // setItemShow(this.show, this.items, 'tableShow', true)
    },

    // 设置table配置
    setTableOptions() {
      // 有自定义配置，合并配置属性
      if (!isEmptyValue(this.tableOptions)) {
        this.tableOptions = assignObject({ ...this.tableOptions }, this.tableConfig.tableOptions)
      }
    },

    // 计算表头
    changeItemsKey() {
      const items = deepCopy(this.items)
      for (let i = 0; i < items.length; i++) {
        const item = items[i]
        for (const key in item) {
          const newKey = this.keyMap[key]
          if (newKey) {
            item[newKey] = item[key]
            delete item[key]
          }
        }
      }
      items.filter(item => item.tableShow)
      return items.filter(item => item.tableShow)
    },

    // 设置映射集 map type Object
    setMappingList() {
      let list = []
      this.tableHeaders.forEach(item => {
        item.mapping && (list = list.concat(item.map))
      })
      this.config.mapping = list
    },

    // 获取数据
    setData() {
      this.data = deepCopy(this.tableData)
    },

    // 自定义过滤方法
    filterOnlyCapsText(value, search, item) {
      // console.log(value, search, item)
      return value.includes(search)
    },

    // 自定义分页
    tablePagination(page, itemsPerPage, pageStart, pageStop, pageCount, itemsLength) {
      console.log(page, itemsPerPage, pageStart, pageStop, pageCount, itemsLength)
    }
  }
}
</script>

<style lang="scss" scoped>
// .tableCustom {
// }

// .tablePagination {
// }
</style>
